<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>位置轨迹示例</title>
</head>
<body>

<img src="/Users/w/Desktop/big2.png" id="mapImage" style="position: absolute; top: 0; left: 0; z-index: 1;">
<canvas id="trajectoryCanvas" style="position: absolute; top: 0; left: 0; z-index: 2;"></canvas>

<script>
  let historyData = [
    // 这里是您给出的原始数据
    { "x": 360.6043073618, "y": 58.042606039, "z": 0 },
    { "x": 342.9580112178, "y": 58.5209519938, "z": 0 },

    // 这里是一些模拟的数据点
    { "x": 335, "y": 60, "z": 0 },
    { "x": 320, "y": 65, "z": 0 },
    { "x": 310, "y": 68, "z": 0 },
    // ... 你可以继续添加更多的点
  ];

  let canvas = document.getElementById('trajectoryCanvas');
  let ctx = canvas.getContext('2d');

  let img = document.getElementById('mapImage');
  img.onload = function() {  // 确保图片加载完成后再设置canvas的大小并绘制轨迹
    canvas.width = img.width;
    canvas.height = img.height;
    drawTrajectory(historyData);
  }

  function drawTrajectory(data) {
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    ctx.beginPath();
    data.forEach((point, index) => {
      if (index === 0) {
        ctx.moveTo(point.x, point.y);
      } else {
        ctx.lineTo(point.x, point.y);
      }
    });

    ctx.strokeStyle = '#000';
    ctx.lineWidth = 2;
    ctx.stroke();

    // 绘制最新的位置
    let latestPoint = data[data.length - 1];
    ctx.fillStyle = '#FF0000';
    ctx.arc(latestPoint.x, latestPoint.y, 5, 0, 2 * Math.PI);
    ctx.fill();
  }
</script>

</body>
</html>

